<template>
  <div class="main">
    <p class="border-bottom main-title">确定账号</p>
    <div class="main-center">
      <input type="text" placeholder="请输入手机号" v-model="phone">
      <!-- <input type="text" placeholder="请输入新密码(至少6位)" v-model="newPsd">
      <input type="text" placeholder="请重新输入新密码" v-model="confirmPsd"> -->
      <el-button :plain="true" class="btn default-btn" v-if='!hasPhone' @click="errorFun">下一步</el-button>
      <router-link :to="{path:'/findpass/two',query:{id:phone}}"  tag="button" class="btn" v-if='hasPhone'>下一步</router-link>
    </div>
  </div>
</template>

<script>
import Services from '@/service/service';

  export default {
  name: 'FindPass',
  data(){
    return {
      detail:{
        fandZ:''
      },
      newPsd:'',
      confirmPsd:'',
      phone:'',
      hasPhone:false
    }
  },
  methods: {
    save(){
      let data={
        param:{
          fandZ:this.detail.fandZ
        }
      };
      Services.myAjax({

      });
    },
    errorFun (){
      this.$message.error('手机号填写错误！');
    }

  },
  watch: {
    phone (newVal,oldVal){
        var reg = /^1[34578]\d{9}$/;
        if(!(reg.test(newVal))){
          this.hasPhone = false;

        }else{
          this.hasPhone = true
        }
      }
  },
}
</script>
<style lang="stylus" scoped>
@import '~styles/variables';

.main {
  width: 14rem;
  height: 6.3rem;
  margin-left: 2.6rem;
  margin-top: 0.85rem;
  background: #f5f5f5;

  .main-title {
    font-size: 0.24rem;
    padding: 0.2rem;
  }

  .main-center {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 5rem;
    position: relative;
    top: 1rem;
    margin: auto;
    height: 300px;
  }

  .main-center input {
    height: 48px;
    line-height: 48px;
    border-radius: 48px;
    text-indent:20px;
    font-size 14px
  }

  .btn {
    background: $logoColor;
    height: 48px;
    line-height: 48px;
    border-radius: 48px;
    font-size 14px;
    color: #fff
  }
  .default-btn{
    background:#ccc !important;
    padding:0 !important
  }
}
</style>
